<template>
    <div class="index-container">
        <!-- 导航栏 -->
        <indexNavBar
            :title="carInfo.vinNo"
            @click-left="$router.go(-1)"
        ></indexNavBar>

        <!-- 基本信息 -->
        <p class="index-team-subtit">基本信息</p>
        <div class="index-team-info">
            <div class="index-team-list">
                <span>车牌号</span>
                <span>{{carInfo.licenseNo|| '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>型号</span>
                <span>{{carInfo.privateModel|| '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>品牌</span>
                <span>{{carInfo.autoBrandName|| '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>车辆类型</span>
                <span>{{carInfo.autoModelTypeName|| '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>行驶证</span>
                <span>{{carInfo.licenseIdentCode || '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>营运证</span>
                <span>{{carInfo.permitNo || '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>车龄(年)</span>
                <span>{{carInfo.vehicleAge || 0 }}</span>
            </div>
            <div class="index-team-list">
                <span>性质</span>
                <span>{{carInfo.autoAttributeName || '-'}}</span>
            </div>
        </div>

        <!-- 动态信息 -->
        <p class="index-team-subtit">动态信息</p>
        <div class="index-team-info" style="margin-bottom: 60px;">
            <div class="index-team-list">
                <span>车辆状态</span>
                <span class="auto-status" :style="{color}" >{{carInfo.tmnlRealStatusName || '离线' }}</span>
            </div>
            <div class="index-team-list">
                <span>随车电池SN码</span>
                <span>{{carInfo.snCode || '-'}}</span>
            </div>
            <div class="index-team-list">
                <span>所在城市</span>
                <span>{{carInfo.tmnlCity || '未知'}}</span>
            </div>
            <div class="index-team-list">
                <span>司机</span>
                <span>{{carInfo.trucker || '-' }}</span>
            </div>
            <div class="index-team-list">
                <span>余额(元)</span>
                <span>{{carInfo.amount || 0 }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import indexNavBar from '../../components/style/index-nav-bar.vue'

export default {
    components: {
        indexNavBar
    },
    data () {
        return {
            queryParameter: {
                autoNo: ''
            },
            carInfo: []
        }
    },
    mounted () {
        this.queryParameter.autoNo = this.$route.query.autoNo
        this.init()
        this.hideItem()
    },
    computed: {
        color () {
            let color
            switch (this.carInfo.tmnlRealStatusName) {
                case '行驶' : color = '#0CBD7F'; break
                case '休眠' : color = '#FFC20B'; break
                case '离线' : color = '#A4B7D8'; break
                case '偏移围栏' : color = '#FF6E6E'; break
                default: color = '#A4B7D8'; break
            }
            console.log(color)
            return color
        }
    },
    methods: {
        /* 初始化 */
        init () {
            this.getCarDetail()
        },
        /* 获取车辆详情*/
        async getCarDetail () {
            let _ = this
            _.$U.showLoading(_)
            try {
                const { data: res } = await _.$H.get(_, _.$A.team.appCarInfo, _.queryParameter)
                _.carInfo = res
                _.$U.hideLoading(_)
            } catch (e) {
                _.$U.hideLoading(_)
            }
        }
    }
}
</script>

<style lang="less" scoped>

.auto-status {
    color: #0CBD7F;
}
</style>
